// elementUI 全局样式设置
:root {
    --el-menu-bg-color: var(--system-default-black) !important;
    --el-menu-text-color: var(--system-default-white) !important;
}

$dialogPaddingLeft: px2rem(40px);
$dialogPaddingRight: px2rem(40px);
$dialogPaddingTop: px2rem(50px);
$dialogPaddingBottom: px2rem(50px);

@mixin nav-back() {
    .nav-bar-back {
        height: px2rem(80px);
        display: flex;
        align-items: center;
        padding: $pagePadding;
        box-sizing: content-box;

        img {
            width: px2rem(20px);
            height: px2rem(20px);
            cursor: pointer;
        }

        .left {
            flex: 1;
        }

        .right {
            flex: 1;
            text-align: right;
        }
    }
}

// elementUI dialog样式函数
@mixin el-dialog($dialogName: "el-dialog") {
    :deep(.#{$dialogName}) {
        width: 60% !important;
        border-radius: px2rem(8px);

        @include responsive-theme('lg') {
            width: 100% !important;
            border-radius: 0;
            height: 100vh;
            margin: 0;
            min-width: auto;
        }

        .el-dialog__header {
            padding: $dialogPaddingTop $dialogPaddingRight 0 $dialogPaddingLeft;
            margin: 0 0;
            position: relative;
            margin-right: 0;
            @include font_color('black');
            box-sizing: content-box;

            & .el-dialog__title {
                @include font_color('black');
                font-weight: bold;
                font-size: px2rem(32px);
            }

            @include nav-back();

            @include responsive-theme('lg') {
                padding: px2rem(30px) $pagePaddingLeft;
                overflow: hidden;

                .nav-bar-back {
                    padding: 0;
                    height: px2rem(20px);
                }
            }
        }

        .el-dialog__headerbtn {
            width: px2rem(20px);
            height: px2rem(20px);
            position: absolute;
            right: px2rem(15px);
            top: px2rem(15px);
            @include flex-center();
        }

        .el-dialog__headerbtn .el-dialog__close {
            @include font_color('black');
            font-weight: 600;

            @include responsive("lg") {
                display: none;
            }
        }

        .el-dialog__body {
            padding: 0 $dialogPaddingRight 0 $dialogPaddingLeft;
            box-sizing: content-box;

            @include responsive-theme('lg') {
                padding: 0 0;
            }
        }

        .el-dialog__footer {
            padding: 0 $dialogPaddingRight $dialogPaddingBottom $dialogPaddingLeft;
            box-sizing: content-box;
            text-align: center;

            @include responsive("lg") {
                padding: 0 0;
            }
        }

        @content;
    }
}

// 成功的dialog样式
@mixin success-dialog($name: 'success-dialog') {
    @include el-dialog($name);

    :deep(.#{$name}) {
        width: 26% !important;
        min-width: px2rem(500px);

        // 成功内容页
        .success-content {
            text-align: center;

            @include responsive("lg") {
                margin-top: px2rem(80px);
                padding: 0 px2rem(38px) 0 px2rem(38px);
            }

            .icon {
                width: px2rem(140px);
                height: px2rem(90px);
            }

            .big-tip {
                font-size: px2rem(24px);
                font-weight: bold;
                line-height: px2rem(31px);
                @include font_color("black");
                margin-top: px2rem(30px);

                @include responsive("lg") {
                    margin-top: px2rem(50px);
                }
            }

            .little-tip {
                font-size: px2rem(16px);
                @include font_color("success-little-tip");
                line-height: px2rem(24px);
                margin-top: px2rem(10px);

                @include responsive("lg") {
                    margin-top: px2rem(15px);
                }
            }
        }

        .dialog-footer {
            text-align: center;
            padding-top: px2rem(30px);
            padding-bottom: px2rem(68px);
            display: flex;

            .left {
                flex: 1;
            }

            .right {
                flex: 1;
            }

            @include responsive("lg") {
                margin-top: px2rem(60px);
                padding: 0 px2rem(38px) 0 px2rem(38px);
                display: block;

            }
        }

        @include el-btn() {
            .submit {
                width: px2rem(90%);

                @include responsive("lg") {
                    width: px2rem(100%);
                    height: px2rem(54px);
                    font-size: px2rem(16px);
                }
            }

            .cancel {
                width: px2rem(90%);

                @include responsive("lg") {
                    display: block;
                    width: px2rem(100%);
                    height: px2rem(54px);
                    font-size: px2rem(16px);
                    margin-top: px2rem(15px);
                }
            }
        }

        @content;
    }

}

// elementUI button样式
@mixin el-btn($height: 54px) {
    .btn {
        border: none;
        font-size: px2rem(16px);
        height: px2rem($height);
        width: 100%;
        border-radius: px2rem(27px);
    }

    .submit {
        @include background_color('common');
        @include font_color("white");
        line-height: px2rem(24px);
        border: none;
    }

    .cancel {
        @include background_color('white');
        @include font_color("black");
        line-height: px2rem(24px);
        border-style: solid;
        border-width: px2rem(1px);
        @include border_color("black");
    }

    @content;
}

// elementUI form表单样式
@mixin el-form($height: 46px) {
    :deep(.el-input) {
        width: 100%;
    }

    :deep(.el-textarea__inner) {
        height: auto;
    }

    :deep(.el-form-item__content) {
        width: 100%;

        & .el-row {
            width: 100%;
        }
    }

    :deep(.el-form-item) {
        margin-bottom: 20px;
    }

    :deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
        font-size: px2rem(16px);
        line-height: px2rem(21px);
        margin-bottom: px2rem(15px);
    }

    .form-input {
        height: px2rem($height);
    }

    @content;
}

.el-message-box {
    border-radius: px2rem(8px);

    .el-message-box__status.el-message-box-icon--warning {
        display: none;
    }

    .el-message-box__header {
        padding: px2rem(22px) px2rem(20px);
        font-size: px2rem(18px);
        font-weight: bold;
        color: var(--system-default-black);
        line-height: px2rem(24px);
    }

    .el-message-box__headerbtn .el-message-box__close {
        font-size: px2rem(18px);
        font-weight: bold;
        color: var(--system-default-black);
    }

    .el-message-box__content {
        padding: px2rem(18px) px2rem(20px) px2rem(30px) px2rem(20px);

        .el-message-box__status+.el-message-box__message {
            padding-left: 0;

            p {
                font-size: px2rem(16px);
                line-height: px2rem(24px);
                color: var(--system-default-black);
            }
        }
    }

    .el-message-box__btns {
        padding-bottom: px2rem(20px);

        .el-button {
            width: px2rem(108px);
            height: px2rem(42px);
            border-radius: px2rem(21px);
            border: 1px solid var(--system-default-black);
            color: var(--system-default-black);
            font-size: px2rem(16px);
            padding-top: px2rem(10px);
            padding-bottom: px2rem(10px);
        }

        .el-button--primary {
            border: none;
            color: var(--system-default-white);
            background: var(--system-default-theme);
            border: 1px solid var(--system-default-theme);
            box-shadow: none;
        }
    }
}

.ql-align-center {
    text-align: center;
}

.ql-align-right {
    text-align: right;
}

.ql-align-left {
    text-align: left;
}

.ql-container.ql-snow {
    line-height: normal !important;
    height: 460px !important;
    font-size: 14px;
}

.ql-snow {
    .ql-tooltip[data-mode="link"]::before {
        content: "请输入链接地址:";
    }

    .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
    }

    .ql-tooltip[data-mode="video"]::before {
        content: "请输入视频地址:";
    }

    .ql-picker.ql-size {

        .ql-picker-label[data-value="12px"]::before,
        .ql-picker-item[data-value="12px"]::before {
            content: "12px";
        }

        .ql-picker-label[data-value="14px"]::before,
        .ql-picker-item[data-value="14px"]::before {
            content: "14px";
        }

        .ql-picker-label[data-value="16px"]::before,
        .ql-picker-item[data-value="16px"]::before {
            content: "16px";
        }

        .ql-picker-label[data-value="18px"]::before,
        .ql-picker-item[data-value="18px"]::before {
            content: "18px";
        }

        .ql-picker-label[data-value="20px"]::before,
        .ql-picker-item[data-value="20px"]::before {
            content: "20px";
        }

        .ql-picker-label[data-value="24px"]::before,
        .ql-picker-item[data-value="24px"]::before {
            content: "24px";
        }

        .ql-picker-label[data-value="28px"]::before,
        .ql-picker-item[data-value="28px"]::before {
            content: "28px";
        }

        .ql-picker-label[data-value="32px"]::before,
        .ql-picker-item[data-value="32px"]::before {
            content: "32px";
        }

        .ql-picker-label[data-value="36px"]::before,
        .ql-picker-item[data-value="36px"]::before {
            content: "36px";
        }
    }

    .ql-picker.ql-header {

        .ql-picker-label::before,
        .ql-picker-item::before {
            content: "文本";
        }

        .ql-picker-label[data-value="1"]::before,
        .ql-picker-item[data-value="1"]::before {
            content: "标题1";
        }

        .ql-picker-label[data-value="2"]::before,
        .ql-picker-item[data-value="2"]::before {
            content: "标题2";
        }

        .ql-picker-label[data-value="3"]::before,
        .ql-picker-item[data-value="3"]::before {
            content: "标题3";
        }

        .ql-picker-label[data-value="4"]::before,
        .ql-picker-item[data-value="4"]::before {
            content: "标题4";
        }

        .ql-picker-label[data-value="5"]::before,
        .ql-picker-item[data-value="5"]::before {
            content: "标题5";
        }

        .ql-picker-label[data-value="6"]::before,
        .ql-picker-item[data-value="6"]::before {
            content: "标题6";
        }
    }

    .ql-picker.ql-font {

        .ql-picker-label[data-value="SimSun"]::before,
        .ql-picker-item[data-value="SimSun"]::before {
            content: "宋体";
            font-family: "SimSun" !important;
        }

        .ql-picker-label[data-value="SimHei"]::before,
        .ql-picker-item[data-value="SimHei"]::before {
            content: "黑体";
            font-family: "SimHei";
        }

        .ql-picker-label[data-value="Microsoft-YaHei"]::before,
        .ql-picker-item[data-value="Microsoft-YaHei"]::before {
            content: "微软雅黑";
            font-family: "Microsoft YaHei";
        }

        .ql-picker-label[data-value="KaiTi"]::before,
        .ql-picker-item[data-value="KaiTi"]::before {
            content: "楷体";
            font-family: "KaiTi" !important;
        }

        .ql-picker-label[data-value="FangSong"]::before,
        .ql-picker-item[data-value="FangSong"]::before {
            content: "仿宋";
            font-family: "FangSong";
        }
    }
}